<template>
  <h1>Searcher 搜索条</h1>

  <h3>基本用法</h3>
  <!-- prettier-ignore -->
  <code-demo style="background: #eee;">
    <div style="height: 300px;">
      <Searcher
      :getLabel="(item) => item.name"
      :getOptions="getOptions"
      @submit="(item) => submit(item)"
      ></Searcher>
    </div>

    <template #code>
      {{ `
<template>
  <Searcher
    :getLabel="(item) => item.name"
    :getOptions="getOptions"
    @submit="(item) => submit(item)"
  ></Searcher>
</template>

<script setup>
async function getOptions() {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve([
        { name: 'aaaa' },
        { name: 'bbbb' },
        { name: 'cccc' },
      ])
    }, 1000)
  })
}

function submit(item) {
  console.log(item)
}
</script>
      ` }}
    </template>
  </code-demo>
</template>

<script setup>
async function getOptions() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve([{ name: 'aaaa' }, { name: 'bbbb' }, { name: 'cccc' }])
    }, 1000)
  })
}

function submit(item) {
  console.log(item)
}
</script>

<style lang="scss" scoped></style>
